<script lang="ts" setup>
import 'vue-toast-notification/dist/theme-sugar.css';
import {useToast} from "vue-toast-notification";
import {reactive, ref} from "vue";
import axios from "axios";

const $toast = useToast();//消息提示栏
const stars = ref(4)
const isShowAnxiety = ref(false)
const isShowAllAnxiety = ref(false)
const yuyue = ref(false)
const yuyueInfo = reactive({
  reservationTime: `${String(new Date().getHours()).padStart(2, '0')}:${String(new Date().getMinutes()).padStart(2, '0')}`,
  aneshesia: '局部麻醉',
  reservationDate: `${new Date().getFullYear()}/${String(new Date().getMonth() + 1).padStart(2, '0')}/${String(new Date().getDate()).padStart(2, '0')}`
})
const optionsFnTime2 =  (hr, min, sec) => {
  if (hr < 6 || hr > 18) {
    return false
  }
  return true
}

const showYuyue = () => {
  yuyue.value = true
  yuyueInfo.reservationTime = `${String(new Date().getHours()).padStart(2, '0')}:${String(new Date().getMinutes()).padStart(2, '0')}`
  yuyueInfo.reservationDate = `${new Date().getFullYear()}/${String(new Date().getMonth() + 1).padStart(2, '0')}/${String(new Date().getDate()).padStart(2, '0')}`
  yuyueInfo.aneshesia = '局部麻醉'
}
const submitYuyue = () => {
  console.log(yuyueInfo);
  const combinedStr = `${yuyueInfo.reservationDate} ${yuyueInfo.reservationTime}`;
  const finalDate = new Date(combinedStr.replace(/\//g, '-')); // 替换为 "2025-04-03 02:14"
  const data = {
    reservationTime:finalDate,
    aneshesiaType:yuyueInfo.aneshesia
  }
  console.log(data);
  yuyue.value = false
  axios.post("/api/reservation/add",data,{
    headers:{
      token:localStorage.getItem("patient-auth-token")
    }
  }).then(res=>{
    if(res.data.success){
      $toast.open({
        message: "预约成功",
        type: 'success',
        position: 'bottom-right',
      });
    }else{
      $toast.open({
        message: res.data.message,
        type: 'error',
        position: 'bottom-right',
      });
    }
  })

}
const aneshesias = ['局部麻醉', '镇静麻醉', '静脉麻醉']
const showAllAnxiety = () => {
  isShowAllAnxiety.value = true
  getAllAnxiety()
}
const getAllAnxiety = () => {
  axios.post('/api/anxiety/getMyAnxiety', {}, {
    headers: {
      token: localStorage.getItem("patient-auth-token")
    }
  }).then(res => {
    rows.value = res.data.message
  })
}
const columns = ref([
  {
    name: 'scores',
    required: true,
    label: '焦虑程度',
    align: 'left',
    field: row => row.scores < 11 ? "轻度焦虑" : row.scores < 19 ? "中度焦虑" : "牙科焦虑症",
    format: val => `${val}`,
    sortable: true
  },
  {name: 'inputTime', label: '评估时间', field: 'inputTime'},
  {name: 'aneshesiaPlan', label: '系统推荐麻醉方案', field: 'aneshesiaPlan'},
])

const rows = ref([])
const anxietyOption = reactive({
  a: '2',
  b: '2',
  c: '2',
  d: '2',
  e: '2'
})
const showAnxiety = () => {
  anxietyOption.a = '2'
  anxietyOption.b = '2'
  anxietyOption.c = '2'
  anxietyOption.d = '2'
  anxietyOption.e = '2'
  isShowAnxiety.value = true;
}
const submitAnxiety = () => {
  let count = parseInt(anxietyOption.a) + parseInt(anxietyOption.b) + parseInt(anxietyOption.c) + parseInt(anxietyOption.d) + parseInt(anxietyOption.e)
  console.log(count)
  const data = {
    scores: count
  }
  let str = ''
  if (count < 11) {
    str = '轻度焦虑'
  } else if (count < 19) {
    str = '中度焦虑'
  } else {
    str = '牙科焦虑症'
  }
  isShowAnxiety.value = false;

  axios.post("/api/anxiety/add", data, {
    headers: {
      token: localStorage.getItem("patient-auth-token")
    }
  }).then(res => {
    if (res.data.success) {
      $toast.clear();
      $toast.open({
        message: "当前程度为" + str + "系统推荐" + res.data.message,
        type: 'success',
        position: 'bottom-right',
      });
    } else {
      $toast.clear();
      $toast.open({
        message: '提交失败',
        type: 'success',
        position: 'bottom'
        // all of other options may go here
      });
    }
  })
}
const  optionsFn =  (date) => {
  return date >= `${new Date().getFullYear()}/${String(new Date().getMonth() + 1).padStart(2, '0')}/${String(new Date().getDate()).padStart(2, '0')}`
}
</script>

<template>
  <div style="height: 100vh;width: 100vw;background: url('/imgs/logo.jpg')">
    <div class="q-pa-md row items-start q-gutter-md">
      <q-card class="my-card" style="width: 40vw">
        <q-card-section>
          <div class="text-h6 q-mb-xs">焦虑评估</div>
          <div class="row no-wrap items-center">
            <span class=" text-h7 text-grey">牙医的焦虑评估主要是用于评估患者在接受牙科治疗过程中产生的焦虑或恐惧程度，而不是评估医生本身的情绪。该评估对于临床治疗具有重要意义，特别是在拔牙、儿童治疗、种植等容易引发紧张的场景中。</span>
          </div>
          <q-img src="/imgs/wenjuan.jpg"/>

          <div style="text-align: right;margin-top: 30px">
            <q-btn-group spread>
              <q-btn align="left" class="btn-fixed-width" color="primary" label="历史评估记录" @click="showAllAnxiety"/>

              <q-btn align="right" class="btn-fixed-width" color="secondary" label="一键评估" @click="showAnxiety"/>
            </q-btn-group>
          </div>
        </q-card-section>

      </q-card>

      <q-card class="my-card" style="width: 30vw;">
        <q-img src="/imgs/yuyue.jpg"/>
        <q-card-actions @click="showYuyue">
          <q-btn flat icon="event" round/>
          <q-btn color="primary" flat>
            立即预约
          </q-btn>
        </q-card-actions>
      </q-card>

      <q-dialog v-model="isShowAnxiety">
        <q-card>
          <q-card-section>
            <div class="text-h6">焦虑评估</div>
          </q-card-section>
          <q-separator/>
          <q-card-section>
            <div>1、如果你明天要做口腔治疗，感觉如何？</div>
            <q-radio v-model="anxietyOption.a" label="不焦虑" val="1"/>
            <q-radio v-model="anxietyOption.a" label="轻微焦虑" val="2"/>
            <q-radio v-model="anxietyOption.a" label="焦虑" val="3"/>
            <q-radio v-model="anxietyOption.a" label="非常焦虑" val="4"/>
            <q-radio v-model="anxietyOption.a" label="高度焦虑" val="5"/>
          </q-card-section>
          <q-card-section>
            <div>2、当你坐在医生候诊室里，感觉如何？</div>
            <q-radio v-model="anxietyOption.b" label="不焦虑" val="1"/>
            <q-radio v-model="anxietyOption.b" label="轻微焦虑" val="2"/>
            <q-radio v-model="anxietyOption.b" label="焦虑" val="3"/>
            <q-radio v-model="anxietyOption.b" label="非常焦虑" val="4"/>
            <q-radio v-model="anxietyOption.b" label="高度焦虑" val="5"/>
          </q-card-section>
          <q-card-section>
            <div>3、如果你的牙齿要被钻孔，感觉如何？</div>
            <q-radio v-model="anxietyOption.c" label="不焦虑" val="1"/>
            <q-radio v-model="anxietyOption.c" label="轻微焦虑" val="2"/>
            <q-radio v-model="anxietyOption.c" label="焦虑" val="3"/>
            <q-radio v-model="anxietyOption.c" label="非常焦虑" val="4"/>
            <q-radio v-model="anxietyOption.c" label="高度焦虑" val="5"/>
          </q-card-section>
          <q-card-section>
            <div>4、如果你的牙齿要被打磨抛光，感觉如何？</div>
            <q-radio v-model="anxietyOption.d" label="不焦虑" val="1"/>
            <q-radio v-model="anxietyOption.d" label="轻微焦虑" val="2"/>
            <q-radio v-model="anxietyOption.d" label="焦虑" val="3"/>
            <q-radio v-model="anxietyOption.d" label="非常焦虑" val="4"/>
            <q-radio v-model="anxietyOption.d" label="高度焦虑" val="5"/>
          </q-card-section>
          <q-card-section>
            <div>5、要在你的牙龈内注射麻醉时，感觉如何？</div>
            <q-radio v-model="anxietyOption.e" label="不焦虑" val="1"/>
            <q-radio v-model="anxietyOption.e" label="轻微焦虑" val="2"/>
            <q-radio v-model="anxietyOption.e" label="焦虑" val="3"/>
            <q-radio v-model="anxietyOption.e" label="非常焦虑" val="4"/>
            <q-radio v-model="anxietyOption.e" label="高度焦虑" val="5"/>
          </q-card-section>


          <q-separator/>

          <q-card-actions align="right">
            <q-btn v-close-popup color="primary" flat label="取消"/>
            <q-btn color="primary" flat label="提交" @click="submitAnxiety"/>
          </q-card-actions>
        </q-card>
      </q-dialog>
      <q-dialog v-model="isShowAllAnxiety">
        <q-card>
          <q-card-section>
            <div class="text-h6">焦虑评估记录</div>
          </q-card-section>
          <q-separator/>
          <q-table
              :columns="columns"
              :rows="rows"
              style="height: 40vh;width: 500px"
          />
        </q-card>
      </q-dialog>
      <q-dialog v-model="yuyue" persistent transition-hide="scale" transition-show="scale">
        <q-card style="width: 700px; max-width: 80vw;display: flex;flex-direction: column;align-items: center">
          <q-card-section>
            <div class="text-h6">预约</div>
          </q-card-section>
          <q-separator/>
          <div class="d-flex">
            <q-date
                v-model="yuyueInfo.reservationDate"
                style="margin-right: 20px;"
                subtitle="预约日期"
                :options="optionsFn"
            />
            <q-time
                v-model="yuyueInfo.reservationTime"
                subtitle="预约时间"
                :options="optionsFnTime2"
                format24h
            />
          </div>
          <q-select v-model="yuyueInfo.aneshesia" :options="aneshesias" label="麻醉方式" style="width: 70%;"/>

          <q-card-actions align="right">
            <q-btn v-close-popup color="primary" flat label="取消"/>
            <q-btn color="primary" flat label="提交" @click="submitYuyue"/>
          </q-card-actions>
          <q-separator/>
        </q-card>


      </q-dialog>
    </div>
  </div>

</template>

<style lang="scss" scoped>

</style>
